<template>
  <div class="promote-page">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="服务推广" name="one">
        <keep-alive>
          <promote-content
            activeName="one"
            activeTitle="服务推广关键词数据"
            v-if="isShow('one')"
          ></promote-content>
          <promote-service-key :pro_value="pro_value" ref="promoteone" v-else></promote-service-key>
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="企业推广" name="two">
        <keep-alive>
          <promote-content
            activeName="two"
            activeTitle="企业推广关键词数据"
            v-if="isShow('two')"
          ></promote-content>
          <promote-firm-key :pro_value="pro_value" ref="promotetwo" v-else></promote-firm-key>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import promoteContent from "./promote-content";
  import PromoteFirmKey from "./promote-firm-key.vue";
  import PromoteServiceKey from "./promote-service-key.vue";
  import {trace} from "../../utils/trace"

  export default {
    components: {promoteContent, PromoteFirmKey, PromoteServiceKey},
    props: {},
    data() {
      return {
        activeName: "one",
        isShowKeyName: "",
        pro_value: null,
      };
    },
    watch: {},
    computed: {},
    methods: {
      isShow(activeName) {
        return !(
          this.activeName === activeName && this.activeName === this.isShowKeyName
        );
      },
      handleClick(tab, event) {
      },

    },
    created() {
    },
    mounted() {
      this.$bus.on("hiddenKey", (value) => {
        this.isShowKeyName = "";
        this.pro_value = null;
        if (value == 1) {
          trace("刷新推广记录");
          this.$bus.emit("upList_promote");
        }
      });
      this.$bus.on("showKey", item => {
        this.isShowKeyName = this.activeName;
        this.pro_value = item;
        trace("showKey-item=", item)
        this.$nextTick(() => {
          let key = "promote" + this.activeName;
          // if (this.$refs[key]) {
          //   this.$refs[key].init(item);
          // }
        });
      });
    },
    beforeDestroy() {
      this.$bus.off("hiddenKey");
      this.$bus.off("showKey");
    }
  };
</script>

<style lang="scss" scoped>
  .promote-page {
  }

  .el-tabs {
    height: 100%;

    ::v-deep .el-tabs__content {
      height: 100%;

      .el-tab-pane {
        height: 100%;
      }
    }

    ::v-deep .el-tabs__header {
      margin: 10px;
    }

    ::v-deep .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-tabs__nav-wrap::after {
      background: transparent;
    }

    ::dee-p .el-table td div{
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
</style>
